<template>
  <div class="zy-content">
    <!--    生产执行首页-->
    <div class="searchBox search-box-layout">
      <search :columns="searchData" @getSearch="getSearch(arguments)"></search>
    </div>
    <div class="list-layout mt16">
      <div class="btns clear">
        <!--        {{ $t('common.listInformation') }}-->
        <span class="title">
          工单列表
        </span>
             <!-- <Button @click="handleAdd">
              排程
             </Button> -->
      </div>
      <div class="tableContent" :style="{ height: tableHeight + 'px' }">
        <Table :columns="columns" ref="selection" border :data="list" :height="tableHeight">
          <template slot-scope="{ row }" slot="action">
            <Row :gutter="6">
              <Col span="24">
                <span class="operationBtn"  @click="handleAdd(row,true)">排程</span>
                <span class="operationBtn" @click="toDetail(row)"><i
                    class="iconfont zy-common-bianji"></i>详情</span>

                <span class="operationBtn" @click="handleDeleteRow(row)"><i
                    class="iconfont zy-common-shanchu"></i>删除</span>

              </Col>
              <!--                <span class="operationBtn" @click="reportWork(row)"><i-->
              <!--                    class="iconfont zy-common-bianji"></i>报工</span>-->
              <!--                <span class="operationBtn" @click="handleEditRow(row)"><i-->
              <!--                    class="iconfont zy-common-wancheng"></i>开工</span>-->
            </Row>
          </template>
        </Table>
      </div>
      <div class="pageWrap mt16">
        <pageLeftTitle :total="total"/>
        <Page :total="total" :page-size="params.pageSize" :current="params.current" @on-change="changePageNum"
              @on-page-size-change="changePageSize" show-sizer/>
      </div>
    </div>
    <Modal :mask-closable="false" v-model="deleteShow" title="删除" class="modal-title-layout">

      <div class="icon red">
        <i class="iconfont zy-common-shanchu"></i>
      </div>
      <p class="title">
        <span>{{ $t('common.sureDelete') }}</span>
      </p>
      <div slot="footer">

        <Button type="default" @click="deleteShow = false">取消</Button>
        <Button type="primary" @click="handleDeleteSure">确定</Button>
      </div>
    </Modal>
    <!--    开工弹框-->
    <Modal :mask-closable="false" v-model="startShow" title="开工" class="modal-title-layout">
      <div class="icon red">
        <i class="iconfont zy-common-wancheng"></i>
      </div>
      <p class="title">
        <span>是否确认开工？</span>
      </p>
      <div slot="footer">
        <Button type="default" @click="startShow = false">取消</Button>
        <Button type="primary" @click="handleStart">确定</Button>
      </div>
    </Modal>

    <!--    报工弹框-->
    <Modal :mask-closable="false" v-model="reportWorkShow" title="报工" class="modal-title-layout">
      <Form
          ref="form"
          class="form-container formList"
          label-position="top"
      >
        <Row :gutter="16">
          <Col span="12">
            <FormItem
                label="工单号"
                class="custom-form-item"
            >
              <Input
                  disabled
                  v-model="reportWorkItem.workNo"
                  placeholder=""
                  class="inputBorder"
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem
                label="产品名称"
                class="custom-form-item"
            >
              <Input
                  disabled
                  v-model="reportWorkItem.productName"
                  placeholder=""
                  class="inputBorder"
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem
                label="机台名称"
                class="custom-form-item"
            >
              <Input
                  disabled
                  v-model="reportWorkItem.equipmentName"
                  placeholder=""
                  class="inputBorder"
              ></Input>
            </FormItem>
          </Col>

          <Col span="12">
            <FormItem
                label="已下发数量"
                class="custom-form-item"
            >
              <Input
                  disabled
                  v-model="reportWorkItem.orderCount"
                  placeholder=""
                  class="inputBorder"
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem
                label="报工数量"
                required
                class="custom-form-item"
            >
              <Input
                  type="number"
                  v-model="reportWorkItem.formMaterialCount"
                  placeholder="请输入报工数量"
                  class="inputBorder"
              ></Input>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="default" @click="reportWorkShow = false">取消</Button>
        <Button type="primary" @click="handleStart">确定</Button>
      </div>
    </Modal>

    <Modal :mask-closable="false" v-model="createStatus" title="进行排程" class="modal-title-layout">
      <InputNumber max="99922" style="width: 100%"
                                             
                                             clearable type="number" number v-model.number="form.index"
                                             
                                             :placeholder="$t('请输入')">
                                </InputNumber>
                                <div slot="footer">
      
        <Button type="primary" @click="handleAddSubmit">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {basedataEquipmentAllApi} from '@/api/dataBasic/process.js'
import ImportExcelModal from '@/components/importExcel.vue';
import fileDownload from "js-file-download";
import search from "@/components/curd/searchList.vue";
import toggleTableOperation from '@/mixins/toggleTableOperation';
import {
  BomApi,
  editApi,
  addApi,
  deleteApi,
  productApi,
  queryByWorkOrder,
  materialAllApi
} from '@/api/dataBasic/materialBom'

export default {
  name: "manufacturingExec",
  components: {ImportExcelModal, search},
  mixins: [toggleTableOperation],
  data() {
    return {
      reportWorkItem: {},
      reportWorkShow: false,
      params: {
        pageSize: 20,
        current: 1
      },
      startForm: {},
      startShow: false,
      productBom: [],
      searchData: [
        {
          title: "选择机台",
          key: "id",
          type: 'select',
          dicData: [],
          params: {
            label: "equipmentName",
            value: "id",
          }
        }
        // ,
        // {
        //   title: "物料名称",
        //   key: "materialId",
        //   type: 'select',
        //   dicData: [],
        //   params: {
        //     label: "materialName",
        //     value: "id",
        //
        //   }
        // },


      ],
      columns: [
        {
          title: '序号',
          width: 80,
          align: 'center',
          render: (h, params) => {
            return h('span', params.index + (this.params.current - 1) * this.params.pageSize + 1);
          },
        },
        {
          title: '工单号',
          key: 'workNo',
          align: 'center',
          minWidth: 200,
          resizable: true,

        }, {
          title: '产品名称',
          key: 'productName',
          align: 'center',
          resizable: true,
          minWidth: 200

        }, {
          title: '产品编码',
          key: 'productCode',
          align: 'center',
          resizable: true,
          minWidth: 150

        }, {
          title: '已下发数量',
          key: 'orderCount',
          align: 'center',
          resizable: true,
          minWidth: 150

        }, {
          title: '计划开始',
          key: 'planBeginTime',
          align: 'center',
          resizable: true,
          minWidth: 200

        }, {
          title: '计划结束',
          key: 'planEndTime',
          align: 'center',
          resizable: true,
          minWidth: 200

        },
        {
          title: "操作",
          slot: "action",
          fixed: "right",
          width: 250,
          align: "center",
          resizable: true,
        }
      ],
      importExcelState: false,
      list: [],
      total: 0,
      deleteShow: false,
      currentItem: {},
      createStatus: false,
      form: {},
      nameList: [],
      searchParams: {},
      equipmentList: []

    }
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 400;
    }
  },

  mounted() {
    this.relevance()
  },
  methods: {
    handleStart() {
      this.axios
          .post("/api/workOrderStartRecord/save", {
            workOrderId: this.startForm.id,
            equipmentId: this.searchParams.id
          })
          .then((res) => {
            if (res.code === 200) {
              this.$Message.success(res.message);
              this.startForm = {};
              this.startShow = false;
              this.getList();
            } else {
              this.$Message.warning(res.message);
            }
          });
    },
    relevance() {
      // 获取机台列表
      basedataEquipmentAllApi().then(res => {
        if (res.code === 200) {
          this.equipmentList = res.data
          this.searchData[0].dicData = res.data
        }
      })
    },
    getSearch(arg) {
      this.searchParams = arg[0] || {};
      this.getList();
    },
    importExcelChange(val) {
      this.importExcelState = false;
      if (val === 'success') {
        this.$Message.success('导入成功!');
        this.changeNum();
      }
    },
    async getList() {
      if (!this.searchParams.id) {
        this.$Message.warning('请先选择机台');
        return false
      }
      try {
        const response = await queryByWorkOrder({...this.params, ...this.searchParams})
        if (response.code === 200) {
          this.list = response.data;
          // this.total = response.data.total;
        } else {
          this.$Message.warning(response.message);
        }
      } catch (error) {
        console.error(error);
        this.$Message.error('获取列表失败');
      }
    },
    reset() {
      this.params = {pageSize: 20, current: 1};
      this.getList();
    },
    changeNum() {
      this.params.current = 1;
      this.params.pageSize = 20;
      this.getList();
    },
    handleAdd(params) {
      this.form = {...params};
      this.createStatus = true;
    },

    handleImportData() {
      this.importExcelState = true;
    },
    handleAddSubmit() {
      this.axios
          .post("/api/workOrder/updateIndex", {
            id: this.form.id,
            index: this.form.index,
          }).then(res=>{
           if(res.code===200){
            this.$Message.success(res.message);
            this.getList();
            this.createStatus = false;
           }else{
            this.$Message.error(res.message);
    
           }
          })
     
         

    },
    // 点击详情
    toDetail(row) {
      this.$router.push({
        path: '/workPlanDetail/index', query: {
          id: row.id,// 将对象转换为字符串以通过URL传递
          ...row
        }
      })

    },
    // 点击开工
    handleEditRow(row) {
      this.startForm = {...row};
      this.startShow = true;
    },
    // 点击报工
    reportWork(row) {
      this.reportWorkItem = row;
      for (const item of this.equipmentList) {
        if (item.id == this.searchParams.id) {
          this.reportWorkItem.equipmentName = item.equipmentName
        }
      }
      this.reportWorkShow = true;
    },
    // 点击删除
    handleDeleteRow(row,type) {
   
      this.currentItem = {...row,typeIs:type};
      this.deleteShow = true;
    },
    // 确认删除
    handleDeleteSure() {
      this.axios
          .delete("/api/workOrder/delete", {
            ids: [this.currentItem.id]
          })
          .then((res) => {
            if (res.code === 200) {
              this.$Message.success(res.message);
              this.currentItem = {};
              this.deleteShow = false;
              this.getList();
            } else {
              this.$Message.warning(res.message);
            }
          });
    },
    changePageNum(val) {
      this.params.current = val;
      this.getList();
    }
    ,
    changePageSize(val) {
      this.params.pageSize = val;
      this.getList();
    }
  }
}
</script>

<style scoped>
.tableContent {
}

.iViewIcon {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
